<!doctype html>
<html lang="en" data-bs-theme="dark"> 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Encrypt Decrypt Program | Albi Mudakar</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="p-3 mb-2 text-white font-weight-bold">
    <div class="container-lg p-3 text--bs-light --bs-light-bg-subtle border border-light-subtle rounded-3" id="container">
        <h2 class="text-center font-weight-600">Encryption and Decryption With Method Synchronous</h2>
        <h6 class="text-center font-weight-bold">Developed By Albi Mudakar</h6>
        <hr>
        <h2 class="text-left font-weight-bold">Encryption</h2>
        <div class="mb-3" data-bs-theme="dark">
            <label for="enter-message" class="form-label">Plain Text</label>
            <input type="text" class="form-control" id="enter-message" placeholder="Input Plain Text">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Key</label>
            <input type="text" class="form-control" id="enter-key" placeholder="Enter Key">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Chiper Text</label>
            <input type="text" class="form-control" id="result-encrypt" placeholder="Result encrypt">
          </div>
          <button type="button" class="btn btn-primary" id="btn-encrypt" >Encrypt</button>
          
          <hr>
          <h2 class="text-left font-weight-bold">Decryption</h2>
          <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Chiper Text</label>
            <input type="text" class="form-control" id="encrypted-message" placeholder="Input Chiper Text">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Key</label>
            <input type="text" class="form-control value-key" id="value-key" placeholder="Enter Your Key">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Plain Text</label>
            <input type="text" class="form-control" id="result-decrypt" placeholder="Result">
          </div>
          <button type="button" class="btn btn-outline-warning" id="btn-decrypt">Decrypt</button>
    </div>
    <script src="script.js"></script>
    
  </body>
</html>